<template>
    <div>
        <h1>修改界面</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>
                       {{ data.id }}
                    </td>
                </tr>
                <tr>
                    <td>户型名称</td>
                    <td>
                        <input type="text" v-model="data.houseName">
                    </td>
                </tr>
                <tr>
                    <td>装修标准</td>
                    <td>
                        <input type="text" v-model="data.houseBz">
                    </td>
                </tr>
                <tr>
                    <td>户型结构</td>
                    <td>
                        <select v-model="data.houseTypes">
                            <option value="">==请选择==</option>
                            <option v-for="b in bind" :value="b.houseTypes">{{ b.houseTypes }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>建筑面积</td>
                    <td>
                        <input type="text" v-model="data.jianZ">
                    </td>
                </tr>
                <tr>
                    <td>套内面积</td>
                    <td>
                        <input type="text" v-model="data.taoN">
                    </td>
                </tr>
                <tr>
                    <td>户型图</td>
                    <td>
                        <input type="file" @change="upload">
                        <img :src="'https://localhost:7288'+data.img" width="90px" height="90px">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="修改" @click="Update">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';

const route=useRoute();
const router=useRouter();

onMounted(()=>{
    Bind();
    Find();
})

const data=ref({
    "id": 0,
  "houseName": "",
  "houseTypes": "",
  "houseBz": "",
  "jianZ": 0,
  "taoN": 0,
  "img": "",
  "isdig": false
})

const bind=ref([{
      "hId": 0,
    "houseTypes": ""
}])

//图片上传
const upload=(a:any)=>{
    var f=a.target.files[0];
    if(f.size>2*1024*1024){
        alert('图片不能超过1MB')
        return;
    }
    var fd=new FormData();
    fd.append("file",f);
    axios.post("https://localhost:7288/api/Up/Upload",fd).then(res=>{
        data.value.img=res.data;
    })
}

const Bind=()=>{
    axios.get("https://localhost:7288/api/HouseType/Bind").then(res=>{
        bind.value=res.data;
    })
}

//反填
const Find=()=>{
    var vid=route.query.id;
    axios.get("https://localhost:7288/api/House/Find",{params:{id:vid}}).then(res=>{
        data.value=res.data;
    })
}


//修改
const Update=()=>{
    if(data.value.houseName==""){
        alert('户型名称不能为空');
        return;
    }
    if(data.value.houseTypes==""){
        alert('户型结构不能为空');
        return;
    }
    if(data.value.jianZ==0){
        alert('建筑面积不能为空');
        return;
    }
    if(data.value.taoN==0){
        alert('套内面积不能为空');
        return;
    }
    axios.post("https://localhost:7288/api/House/Update",data.value).then(res=>{
        if(res.data>0){
            alert('修改成功');
            router.push({path:"/Show"})
        }else{
            alert('修改失败');
        }
    })
}

</script>

<style scoped>

</style>